<template>
  <vxe-column
    v-else
    v-bind="tableItem"
    :field="tableItem.prop"
    :title="tableItem.label"
    type="checkbox"
    ref="columRef"
    :formatter="itemFormatter(tableItem)"
  >
    <template #default="props" v-if="__hasSlot('default')">
      <RenderVNode
        :vnodes="__getSlot('default', props)"
      ></RenderVNode>
    </template>
    <template #header="props" v-if="tableItem.checkboxUseElementUI">
      <RenderVNode
        v-if="__hasSlot('header')"
        :vnodes="__getSlot('header', props)"
      ></RenderVNode>
      <el-checkbox
        v-else
        :label="tableItem.label"
        :size="size"
        :value="props.checked"
        :disabled="props.disabled"
        :indeterminate="props.indeterminate"
        @click.native.stop="triggerCheckAllEvent($event,props)"
      ></el-checkbox>
    </template>
    <template #checkbox="props" v-else-if="__hasSlot('header')">
      <RenderVNode
        :vnodes="__getSlot('header', props)"
      ></RenderVNode>
    </template>
    <template #footer="props" v-if="__hasSlot('footer')">
      <RenderVNode
        :vnodes="__getSlot('footer', props)"
      ></RenderVNode>
    </template>
    <template #title="props" v-if="__hasSlot('title')">
      <RenderVNode
        :vnodes="__getSlot('title', props)"
      ></RenderVNode>
    </template>
    <template #checkbox="props" v-if="tableItem.checkboxUseElementUI">
      <RenderVNode
        v-if="__hasSlot('checkbox')"
        :vnodes="__getSlot('checkbox', props)"
      ></RenderVNode>
      <el-checkbox
        v-else
        :size="size"
        :value="props.checked"
        :disabled="props.disabled"
        :indeterminate="props.indeterminate"
        @click.native.stop="checkboxChange($event,props)"
      ></el-checkbox>
    </template>
    <template #checkbox="props" v-else-if="__hasSlot('checkbox')">
      <RenderVNode
        :vnodes="__getSlot('checkbox', props)"
      ></RenderVNode>
    </template>
    <template #filter="props" v-if="__hasSlot('filter')">
      <RenderVNode
        :vnodes="__getSlot('filter', props)"
      ></RenderVNode>
    </template>
    <template #edit="props" v-if="__hasSlot('edit')">
      <RenderVNode
        :vnodes="__getSlot('edit', props)"
      ></RenderVNode>
    </template>
  </vxe-column>
</template>

<script>
import {
  TableItemOtherCommonMixin
} from "../Utils/TableItemOtherCommonMixin";
import HtmlElementUtils from "../../../utils/htmlElementUtils";

export default {
  name: "Checkbox",
  mixins: [TableItemOtherCommonMixin],
  computed: {
    isAllCheckboxSelected() {
      return this.vxeTable.isAllSelected
    },
  },
  created() {
    if(this.tableItem.checkboxUseElementUI === undefined) {
      this.tableItem.checkboxUseElementUI = true
    }
  },
  methods: {
    checkboxClick(e, props) {
      if (props.disabled) {
        return false
      }
      const el = e.srcElement
      return el.tagName.toLowerCase() === 'span' && HtmlElementUtils.hasClass(el, 'el-checkbox__inner');
    },
    checkboxChange(e, props) {
      if (this.checkboxClick(e, props)) {
        this.vxeTable.toggleCheckboxRow(props.row)
      }
    },
    triggerCheckAllEvent(e, props) {
      if (this.checkboxClick(e, props)) {
        this.vxeTable.setAllCheckboxRow(!this.isAllCheckboxSelected)
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
